<template>
	<view id="body">
		<view class="top">
			<text class="fk">{{title}}</text>
		</view>
		<view class="address">
			<text class="contacts">{{order.contacts}}</text>
			<text class="phone">{{order.contacts_phone}}</text>
			<view class="ad">
				<text class="">{{order.address}}</text>
			</view>
			<view class="dz">
				<text class="t-icon t-icon-dizhi" style="width: 40rpx;height: 40rpx;"></text>
			</view>
			<view class="bj" @click="bj" v-if="order.state == 0">
				<text class="t-icon t-icon-daochu1024-30" style="width: 40rpx;height: 40rpx;"></text>
			</view>
		</view>
		<!-- 订单内容 -->
		<view class="order-conent">
			<view>
				<text class="order-title">订单标题:</text>
				<text class="order-title-text">{{order.title}}</text>
			</view>
			<view> 
				<text class="order-conent-ct">订单内容:</text>
				<text class="order-conentct-text">{{order.content}}</text>
			</view>
			<view>
				<text class="order-remarks">订单备注:</text>
				<text class="order-remarks-text">{{order.bezhu}}</text>
			</view>
			<!-- 图片信息 -->
			<view style="padding-bottom: 20rpx;margin-left: 40rpx;margin-right: 40rpx;">
				<u-divider text="图片信息" textColor="#3c9cff" lineColor="#3c9cff"></u-divider>
			</view>
			<view class="order-imglist"> 
				<u-empty mode="data" :text="imgflagetext" v-if="imgflage"></u-empty>
				<view v-if="! imgflage">
					<image :src="item" v-if="item" mode="" class="imglist" v-for="(item,index) in imagesList" :key="item" @tap="ViewImage(index)" @longpress="deleteImg(index)"></image>
				</view>
			</view>
			<view class="bj2" @click="bj2" v-if="order.state == 0">
				<text class="t-icon t-icon-daochu1024-30" style="width: 40rpx;height: 40rpx;"></text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order">
			<view>
				<text class="order-id">订单编号:</text>
				<text class="idtext">{{order.orderid}}</text>
				<text class="order-id-fz" @click="copy">复制</text> 
			</view>
			<view>
				<text class="order-user">发布用户:</text>
				<text class="username">{{order.issueUser}}</text>
			</view>
			<view>
				<text class="order-time">下单时间:</text>
				<text class="createtime">{{order.createTime}}</text>
			</view>
			<view>  
				<text class="zf-time">是否支付:</text>
				<text class="zftype" :style="{color:flage?'#3c9cff':'#ff5500'}">{{flagetext}}</text>
			</view> 
			<!-- 按钮 -->
			<view style="padding-bottom: 40rpx;">
				<text class="pricetext">订单金额:</text> 
				<text class="price">{{order.price}}元</text>
			</view>
		</view>
		<!-- 接单用户信息 -->
		<u-loadmore status="nomore" line="line" nomoreText="接单用户" /> 
		<view class="belongUserview">
			<text class="belongUserviewText" v-if="order.belongUser == ''">暂无用户接单</text>
			<view class="belongUserview-user" v-if="order.belongUser != ''">
				<!-- 接单用户头像 -->
				<view class="belongUserview-user-img">
					<image style="width: 120rpx; height: 120rpx;border-radius: 200rpx;overflow: hidden;" :src="order.belongUserImg"></image>
				</view>
				<view class="belongUserview-name">
					<text>{{order.belongUserName}}</text>
				</view>
				<view class="belongUserview-id">
					<text>id: {{order.belongUser}}</text>
				</view>
				<view class="contactUser" @click="contact">
					<text class="t-icon t-icon-xiaoxi" style="width: 68rpx; height: 68rpx;"></text>
				</view>
			</view>
		</view>
		<!-- 支付接单按钮 -->
		<view class="orderbutton"> 
			<text v-if="order.state == 0" class="ljfk" @click="ljfk">立即支付</text>
			<text v-if="order.state == 1" class="ljjd" @click="ljjd">立即接单</text>
			<text v-if="order.state == 2" class="ljjd" @click="ljjd">已接单</text>
		</view>
		<!-- 地址模态框 -->
		<view class="bjmodal">
			<u-modal :show="bjIsTrue" :showConfirmButton="false" closeOnClickOverlay="true" @close="close" >
				<view class="aa">
					<view class="v-name">
						<text class="t-icon t-icon-yonghu" style="width: 48rpx; height: 48rpx; float: left;"></text>
						<text class="mname">联系人</text> 
						<input placeholder="输入姓名" class="name-input" v-model="order.contacts"/>
					</view>
					<view class="line" style="margin-top: 64rpx;">
						<u-line color="#2979ff"></u-line>
					</view>
					<view class="v-phone">
						<text class="t-icon t-icon-shouji" style="width: 48rpx; height: 48rpx; float: left; "></text>
						<text class="mphone">联系电话</text>
						<input placeholder="输入电话" class="phone-input" v-model="order.contacts_phone"/>
					</view>
					<view class="line" style="margin-top: 84rpx;">
						<u-line color="#2979ff"></u-line> 
					</view>
					<view class="v-address">
						<text class="t-icon t-icon-dizhi" style="width: 48rpx; height: 48rpx; float: left; "></text>
						<text class="maddress">联系地址</text>
						<input placeholder="输入地址信息" class="address-input" v-model="order.address"/>
					</view>
					<view class="line" style="margin-top: 84rpx;">
						<u-line color="#2979ff"></u-line>
					</view>
				</view>
			</u-modal>
		</view>
		<!-- 订单内容模态框 -->
		<view class="bjmoda2">
			<u-modal :show="bj2IsTrue" :showConfirmButton="false" closeOnClickOverlay="true" @close="close2" >
				<view class="bb">
					<!-- 标题 -->
					<uni-section class="mb-10" title="发布标题" type="line" titleColor="#909399"></uni-section>
					<view class="title-input">
						<u--textarea placeholder="请输入发布标题" v-model="order.title" height="32rpx" count="true"  maxlength=10></u--textarea>
					</view> 
					<!-- 内容 -->
					<uni-section class="mb-10" title="发布内容" type="line" titleColor="#909399"></uni-section>
					<view class="content-input">
						<u--textarea v-model="order.content" placeholder="请输入发布内容"  count="true"  maxlength=400 ></u--textarea>
					</view>
					<!-- 备注信息 -->
					<uni-section class="mb-10" title="备注信息(选填)" type="line" titleColor="#909399"></uni-section>
					<view class="beizhu-input">
						<u--textarea v-model="order.bezhu" placeholder="请输入发布内容"  count="true"  maxlength=100 ></u--textarea>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {http} from "../../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				title:"未付款",//订单头部是否付款文字
				imagesList: [ //订单图片信息
				],
				imgflage:false,//图片是否为空
				imgflagetext:"",//图片提示文字
				flage:false,//是否支付标记
				flagetext:"未支付",//是否支付文字
				paytext:"",//是否付款提示文字
				bjIsTrue:false,//编辑1模态框标记
				bj2IsTrue:false,//编辑2模态框标记
				order: {
					orderid:"",//订单id
					contacts:"",//联系人
					contacts_phone:"",//联系人电话
					createTime:"",//订单创建时间
					address:"",//地址
					title:"", //标题
					content:"",//内容
					bezhu:"",//备注
					remarks:"",//订单备注
					price:"",//订单价格
					hide_name:0,//是否匿名
					issueUser:"",//发布用户id
					issueUserNmae:"",//发布用户名
					ordertypeid:"",//订单所属类型id
					state:0,//订单状况
					belongUser:"",//接单用户id
					belongUserName:"",//接单用户名称
					belongUserImg:"",//接单用户头像
				} 
			}
		},
		methods: {
			onLoad(options){
				console.log("订单信息是："+options.data)
				var orderData = JSON.parse(options.data) 
				//订单图片信息
				if(orderData.orderImg == ""){
					this.imagesList = []
				}else{
					this.imagesList = orderData.orderImg.split(",") 
				}
				//处理接单用户信息
				if(orderData.belongUser){
					var that = this
					var promise = new Promise(function(resolve,reject){
						uni.request({
							url:http+"user/userinfo/"+orderData.belongUser,
							method:"GET",
							complete:(res)=>{
								if(res.data.code == 20021){
									var User = res.data.date
									that.order.belongUser = User.id
									that.order.belongUserImg = User.img
									that.order.belongUserName = User.name
									resolve()
								}else{
									uni.$u.toast("获取接单用户信息失败")
								}
							}
						})
					})
					promise.then(res=>{
						that.order.orderid = orderData.id
						that.order.createTime = orderData.createTime
						that.order.contacts = orderData.contacts
						that.order.contacts_phone = orderData.contactsPhone
						that.order.address = orderData.contactsAddress
						that.order.title = orderData.title
						that.order.content = orderData.content	
						that.order.bezhu = orderData.remarks 
						that.order.issueUser = orderData.issueUser
						that.order.issueUserName = orderData.issueUserName
						that.order.price = orderData.price
						that.order.ordertypeid = orderData.ordertypeid
						that.order.state = orderData.state
						that.belongUser = orderData.belongUser
						var user = uni.getStorageSync('user')
						var a = ""
						if(user){
							 a = (JSON.parse(user)).id
						}
						if(orderData.hideName == 1){
							that.order.issueUser = "匿名"
						} 
						if(that.order.state != 0){
							const a = ["未付款","已付款","接单中","接单用户已完成,待完结","已完结", "已退款","问题订单"] 
							that.title = a[that.order.state]
							that.flagetext = "已支付"
							that.flage= true
						}
						//用户没有登录的情况
						if(a == "" & a.length <= 0){
							that.imgflage = true
							that.imgflagetext = "接单后查看图片"
						}else{//用户登录了的情况
							if(that.imagesList == []){
								that.imgflage = false
								that.imgflagetext = "图片为空"
							}else{
								//可以查看的情况
								if(that.order.issueUser == a || that.order.belongUser == a){
									that.imgflage = false
									that.imgflagetext = "图片信息"
								}else{
									that.imgflage = true
									that.imgflagetext = "接单后查看图片信息"
								}
							}
						}
					})
				}else{
					this.order.orderid = orderData.id
					this.order.createTime = orderData.createTime
					this.order.contacts = orderData.contacts
					this.order.contacts_phone = orderData.contactsPhone
					this.order.address = orderData.contactsAddress
					this.order.title = orderData.title
					this.order.content = orderData.content	
					this.order.bezhu = orderData.remarks 
					this.order.issueUser = orderData.issueUser
					this.order.issueUserName = orderData.issueUserName
					this.order.price = orderData.price
					this.order.ordertypeid = orderData.ordertypeid
					this.order.state = orderData.state
					this.belongUser = orderData.belongUser
					var user = uni.getStorageSync('user')
					var a = ""
					if(user){
						 a = (JSON.parse(user)).id
					}
					if(orderData.hideName == 1){
						this.order.issueUser = "匿名"
					}
					if(this.order.state != 0){
						const a = ["未付款","已付款","接单中","接单用户已完成,待完结","已完结", "已退款","问题订单"] 
						this.title = a[this.order.state]
						this.flagetext = "已支付"
						this.flage= true
					}
					//用户没有登录的情况
					if(a == "" & a.length <= 0){
						this.imgflage = true
						this.imgflagetext = "接单后查看图片"
					}else{//用户登录了的情况
						if(this.imagesList == []){
							this.imgflage = false
							this.imgflagetext = "图片为空"
						}else{
							//可以查看的情况
							if(this.order.issueUser == a || this.order.belongUser == a){
								this.imgflage = false
								this.imgflagetext = "图片信息"
							}else{
								this.imgflage = true
								this.imgflagetext = "接单后查看图片信息"
							}
						}
					}
				}
			},
			//修改地址信息
			bj(){
				this.bjIsTrue = true
			},
			//地址信息修改模态框
			close(){
				this.bjIsTrue = false
			},
			//订单内容信息修改模态框
			bj2(){
				this.bj2IsTrue = true
			},
			close2(){
				this.bj2IsTrue = false
			},
			// 复制订单
			copy(){
				 uni.setClipboardData({
				    data:this.order.orderid+"",
				    success: function (res) {
				        uni.getClipboardData({
				        success: function (res) {
				            uni.showToast({
				                title: "复制成功",
				                icon: 'none',
				            })
				        },
				        })
				    },
				    })
			},
			//立即付款
			// ljfk(){
			// 	//封装请求对象
			// 	var wxp = {
			// 		//订单id
			// 		orderid: this.order.orderid,
			// 		//获取的openid
			// 		openid:"",
			// 		//订单名称
			// 		 name:this.order.title,
			// 		//订单价格
			// 		 price:this.order.price
			// 	}
			// 	//封装支付完成后的请求链接
			// 	//请求参数数组
			// 	var sendpost = [
			// 		http+"buyorder",
			// 		http+"sendorder",
			// 		http+"workorder",
			// 		http+"need",
			// 	]
			// 	var user = JSON.parse(uni.getStorageSync('user'))
			// 	var url = sendpost[this.order.ordertypeid -1]+"/"+this.order.orderid+"/"+user.id //封装付款后的请求数据
			// 	uni.login({
			// 		success(res) {
			// 			uni.request({
			// 				url: http+"wxlogin/"+res.code,
			// 				method:"GET",
			// 				success(res) {
			// 					var openid = res.data.date
			// 					wxp.openid = openid
			// 					uni.request({
			// 						url:http+"wxpay",
			// 						data: wxp, 
			// 						method:"POST",
			// 						success(res) {
			// 							var data = res.data.date
			// 							uni.requestPayment({
			// 								// "provider": data.provider,    //支付类型-固定值
			// 								"timeStamp": data.timeStamp, // 时间戳（单位：秒）
			// 								"nonceStr": data.nonceStr, // 随机字符串
			// 								"package": data.packAge, // 固定值
			// 								"signType": data.signType, //固定值
			// 								"paySign": data.paySign, //签名
			// 								    success(res) {
			// 										//修改订单状态
			// 										uni.request({
			// 											url: url,
			// 											method:"PUT",
			// 											complete:(res) =>{
			// 												if(res.data.code == 20041){
			// 													uni.$u. toast("支付成功！")
			// 													setTimeout(()=>{
			// 														//支持成功后跳转到已支付订单里
			// 														uni.redirectTo({
			// 															url: "/loafer/loaferIndex"
			// 														})
			// 													}, 1000);
																
			// 												}else{
			// 													console.log("修改失败")
			// 												}
			// 											}
			// 										})
			// 									}, 
			// 								    fail(e) { 
			// 										uni.$u.toast("支付失败！")
			// 										console.log("支付失败！"+url)
			// 									}
			// 							})
			// 						},
			// 						fail(res) {
			// 							uni.$u.toast("获取openid失败！")
			// 						}
			// 					})
			// 				},
			// 				fail(res) {
			// 					uni.$u.toast("获取code失败！")
			// 				}
			// 			})
			// 		},
			// 		fail(res) {
			// 			uni.$u.toast("获取登录信息失败！")
			// 		}
			// 	})
			// },
			// // 联系用户
			// contact(){
			// 	//添加用户到消息列表
			// 	uni.navigateTo({
			// 		url:"/see/chatpage"+"?id="+this.order.belongUser+"&name="+this.order.belongUserName+"&img="+this.order.belongUserImg
			// 	})
			// },
			ljfk() {
			    // 封装请求对象
			    var wxp = {
			        // 订单id
			        orderid: this.order.orderid,
			        // 获取的openid（这里假设已经获取或者不需要，直接模拟一个值）
			        openid: "mock_openid",
			        // 订单名称
			        name: this.order.title,
			        // 订单价格
			        price: this.order.price
			    };
			
			    // 封装支付完成后的请求链接
			    // 请求参数数组
			    var sendpost = [
			        http + "buyorder",
			        http + "sendorder",
			        http + "workorder",
			        http + "need",
			    ];
			    var user = JSON.parse(uni.getStorageSync('user'));
			    var url = sendpost[this.order.ordertypeid - 1] + "/" + this.order.orderid + "/" + user.id; // 封装付款后的请求数据
			
			    // 模拟支付成功后的逻辑
			    var mockResData = {
			        code: 20041,
			        // 根据实际情况添加更多可能需要的字段，这里省略其他支付相关参数
			    };
			    // 修改订单状态
			    uni.request({
			        url: url,
			        method: "PUT",
			        complete: (res) => {
			            if (res.data.code == 20041) {
			                uni.$u.toast("支付成功！");
			                setTimeout(() => {
			                    // 支持成功后跳转到已支付订单里
			                    uni.redirectTo({
			                        url: "/loafer/loaferIndex"
			                    });
			                }, 1000);
			            } else {
			                console.log("修改失败");
			            }
			        }
			    });
			},
			//立即接单
			ljjd(){
				// 参数校验
				if(! uni.getStorageSync("user")){
					uni.$u.toast("登录后才能接单")
					return
				}
				var user = JSON.parse(uni.getStorageSync("user"))
				if(this.order.issueUser == user.id){
					uni.$u.toast("不能承接自己的订单喔")
					return
				}
				//封装请求参数
				var sendpost = [
					http+"buyorder/userorder/"+this.order.orderid+"/"+user.id,
					http+"sendorder/userorder/"+this.order.orderid+"/"+user.id,
					http+"workorder/userorder/"+this.order.orderid+"/"+user.id,
					http+"need/userorder/"+this.order.orderid+"/"+user.id,
				]
				uni.request({
					url:sendpost[this.order.ordertypeid - 1],
					method:"PUT",
					complete:(res)=>{
						if(res.data.code == 20041){
							console.log("接单用户是："+user.id)
							this.order.belongUser = user.id
							this.order.belongUserName = user.name
							this.order.belongUserImg = user.img
							this.order.state = 2
							this.imgflage = false
							this.imgflagetext = "图片信息"
							uni.$u.toast("接单成功!")
						}else{
							if(res.data.date == 2){
								uni.$u.toast("此单已有人接单了喔")
							}else{
								uni.$u.toast("接单失败!")
							}
							
						}
					}
				})
			},
			//预览图片
			ViewImage(index) {
				uni.previewImage({
					urls: this.imagesList,
					current: index
				});
			},
			//图片长按删除
			deleteImg(index){
				//逻辑判断是否有删除图片权限
				var user = JSON.parse(uni.getStorageSync('user'))
				if(user.id = this.order.issueUser){
					var list = []
					for(var i = 0;i<this.imagesList.length;i++){
						if(index == i){
							continue
						}else{
							list.push(this.imagesList[i])
						}
					}
					this.imagesList = list
				}
			},
		}
	}
</script> 
 
<style scoped>
	@import url("@/static/css/orderDetails.css");
	page {
		background-color:#f5f5f5; 
	}
</style>